<template>
  <TForm ref="tFormRef" v-model="formData" :columns="formColumns" :formProps="formProps" @onFinish="onSubmit">
    <template #test3_form_item>
      <el-form-item label="组件联动">
        <el-radio-group v-model="formData.test3">
          <el-radio value="1" label="1">内容隐藏</el-radio>
          <el-radio value="2" label="2">内容展示</el-radio>
        </el-radio-group>
      </el-form-item>
    </template>
    <template #test4_form_item>
      <el-form-item 
        v-if="formData.test3 === '2'"
        label="联动内容"
        prop="test4"
        :rules="[    
          { required: true, message: '请输入内容', trigger: 'blur' },
        ]">
        <el-input v-model="formData.test4" placeholder="请输入内容" />
      </el-form-item>
    </template>
    <template #submit>
      <div class="text-center">
        <el-button type="danger"  @click="reset">返回</el-button>
        <el-button type="success" @click="submit">提交</el-button>
      </div>
    </template>
  </TForm>
</template>

<script lang="ts" setup>
import { TForm, TFormColumns, TFormProp } from '@twa/components'
import { ref } from 'vue'

const tFormRef = ref()

const formData:any = ref({ // 初始化数据
  test2: '2024-09-11',
  test3: '1',
})
const formProps = ref<TFormProp>({
  labelWidth: '128px'
})
function reset(){
  console.log('开始重置')
  tFormRef.value.reset()
  console.log('已重置')
}
function submit(){
  tFormRef.value.submit()
  console.log('提交校验中')
}
function onSubmit(){
  console.log('校验通过提交', formData.value)
}
const formColumns = ref<TFormColumns[]>([
  { 
    label: '输入框', 
    prop: 'test1',
    valueType: 'input',
    defaultValue: '默认值',
    formItemProps: {
      rules: [    
        { required: true, message: '请输入内容', trigger: 'blur' },
        { min: 1, max: 15, message: '内容长度最小为1，最大值为15', trigger: 'blur' },
      ]
    }
  },
  { 
    label: '日期选择', 
    prop: 'test2',
    valueType: 'date',
    formItemProps: {
      rules: [    
        { required: true, message: '请输入选择', trigger: 'blur' },
      ]
    }
  },
  { 
    label: '组件联动',
    prop: 'test3',
  },
  { 
    label: '被联动内容',
    prop: 'test4',
  },
])
</script>